<template>
	<view class="bg-white app-container" style="overflow: hidden">
		<view style="min-height: 25vh;padding-top: 80upx;">
			<view class="padding text-center" v-if="cardInfo && cardInfo.status === '2'">
				<view class="card-container">
					<view class="info-card" @click="goEdit">
						<view class="margin-bottom-sm info-header ">
							<view class="info-header-left">
								<image src="../static/opts/logo.png"></image>
							</view>
							<view class="info-header-right">
								<image src="../static/opts/txt-name.png"></image>
							</view>
						</view>
						<view class="margin-bottom info-main">
							<view class="info-left">
								<view class="info-item">
									<view class="info-title">姓名：</view>
									<view class="info-value">{{cardInfo.realName}}</view>
								</view>
								<view class="info-item">
									<view class="info-title">毕业年份：</view>
									<view class="info-value">{{cardInfo.studentList[0].graduationYear}}</view>
								</view>
								<view class="info-item">
									<view class="info-title">在校职位：</view>
									<view class="info-value">{{cardInfo.studentList[0].position}}</view>
								</view>
								<view class="info-item">
									<view class="info-title">所在班级：</view>
									<view class="info-value">{{cardInfo.studentList[0].graduationClass}}</view>
								</view>
							</view>
							<view class="info-right">
								<view class="info-photo">
									<image v-if="cardInfo.avatar" :src="cardInfo.avatar+'?thumb=1'" />
									<view v-else class="text-xsl padding">
										<text class="text-red cuIcon-friendaddfill"></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="card-bg">
						<view class="card-bg-bottom">
							<view class="left-item" @click="goSame(0)">同班同学</view>
							<view class="right-item" @click="goSame(1)">同城校友</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else @click="goApply" class="padding text-center">
				<view class="card-container">
					<image class="card-img" src="/static/opts/card.png" />
					<view class="card-text-wrap">
						<view>
							<view class="card-text">
								<text class="status-text">申领校友卡</text>
							</view>
							<view class="card-text2">
								申请您的专属校友卡名片
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 中间线 -->
		<view class="line">
			<image class="line-with-logo" src="/static/opts/logo-s.png"></image>
		</view>
		<!-- 功能 -->
		<view class="content-action padding" style="height: auto;">
			<scroll-view direction="vertical">
				<uni-grid :column="3" :show-border="false" :square="false" @change="change">
					<uni-grid-item v-for="(item,index) in dataObj" :index="index" :key="index">
						<view class="grid-item-box">
							<image class="image" :src="item.icon" mode="aspectFit" />
							<text class=" text">{{item.name}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</scroll-view>
		</view>
		<!-- 底部 -->
		<view class="content-foot">
			<view class="text-lg text-center padding-lg">
				<text class="text-grey">- 江苏省曲塘高级中学小程序 -</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		card_info,
		card_updateCoordinate
	} from '@/common/api/api.js'
	import {
		channelMenu_list
	} from '@/common/api/spider.js'
	import {
		GetCurrentAddress
	} from '@/common/utils/uni_tools.js';

	export default {
		components: {},
		// mixins: [share],
		data() {
			return {
				userInfo: uni.getStorageSync("userInfo"),
				cardInfo: {},
				dataObj: []
			};
		},
		onLoad(e) {
			// 菜单
			channelMenu_list({
				channelCode: "01",
				parentId: "0"
			}).then(res => {
				this.dataObj = this.$s.res(res)
			})
		},
		mounted() {},
		onShow() {
			console.log("onShow>>>>>>>>")
			if (!this.userInfo.phone) {
				return
			}
			card_info().then(res => {
				uni.removeStorageSync("cardInfo")
				this.cardInfo = this.$s.res(res)
				if (this.cardInfo) {
					uni.setStorageSync("cardInfo", this.cardInfo)
					if (this.cardInfo.status === '2') {
						GetCurrentAddress().then(res => {
							card_updateCoordinate({
								longitude: res.longitude,
								latitude: res.latitude
							}).then(res => {
								// console.log(res)
							})
						})
					}
				}
			})
		},
		methods: {
			goApply() {
				if (!this.userInfo.phone) {
					uni.$s.gotoAuth()
				}
				if (this.cardInfo && this.cardInfo.status === "2") {
					uni.navigateTo({
						url: '/pagesB/card/detail'
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/card/apply'
					})
				}
			},
			goEdit() {
				uni.navigateTo({
					url: '/pagesB/card/edit'
				})
			},
			goSame(e) {
				uni.navigateTo({
					url: '/pagesB/card/same?_t=' + e
				})
			},
			change(e) {
				let {
					index
				} = e.detail
				let item = this.dataObj[index]
				let auth = false
				if (item.extra) {
					let extra = JSON.parse(item.extra)
					auth = extra.auth
				}
				if (item.status === '0') {
					uni.showToast({
						icon: 'none',
						title: '更多功能，敬请期待'
					})
					return
				}
				if (auth && this.cardInfo.status != '2') {
					uni.showToast({
						icon: 'none',
						title: '请先领取校友卡享受更多权益'
					})
					return
				}
				if (item.type === "links") {
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: "/pagesB/webview?uri=" + item.url
					})
					// #endif
					// #ifdef H5
					window.location.href = item.url
					// #endif
				} else {
					uni.navigateTo({
						url: item.url
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-action {
		height: 100%;
		padding-bottom: 20%;

		.image {
			width: 80rpx;
			height: 80rpx;
		}

		.text {
			font-size: 16px;
			margin-top: 14px;
		}

		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
			margin: 10px;
		}
	}

	.content-foot {
		position: fixed;
		height: 8%;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		// box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
		background: linear-gradient(to top, rgba(255, 0, 0, 0.3), rgba(255, 255, 0, 0));
	}

	.app-container {
		background-image: url(/static/opts/bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}


	.card-container {
		width: 690rpx;
		height: 420rpx;
		margin: 70rpx auto 46rpx;
		position: relative;

		.card-img {
			width: 100%;
			height: 100%;
		}

		.card-text-wrap {
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 80rpx;
			display: flex;
			justify-content: center;
			text-align: center;

			.card-text {
				width: 100%;
				height: 100%;
				background-image: url(/static/opts/btn.png);
				background-repeat: round;

				.status-text {
					color: #8E6E3E;
					font-weight: bold;
					line-height: 100rpx;
				}
			}

			.card-text2 {
				color: #fff;
				margin-top: 12rpx;
			}
		}
	}

	.card-bg {
		width: 100%;
		height: 200rpx;
		background: #EC3430;
		border-radius: 12rpx 12rpx 24rpx 24rpx;
		position: absolute;
		top: 208rpx;
		left: 50%;
		transform: translatex(-50%);

		.card-bg-bottom {
			position: absolute;
			bottom: 0;
			display: flex;
			color: #E1A054;
			width: 100%;
			padding-bottom: 16rpx;
			font-size: 28rpx;
			font-weight: bold;

			.left-item {
				width: 50%;
			}

			.right-item {
				width: 50%;
				border-left: 1px solid #E1A054;
			}
		}
	}

	.info-card {
		z-index: 100;
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translatex(-50%);
		box-sizing: border-box;
		padding: 24rpx;
		width: 96%;
		height: 320rpx;
		background: #F8E0BC;
		margin: 0 auto;
		border-radius: 20rpx;

		.info-header {
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			color: red;
			font-weight: bold;

			.info-header-left {
				// font-size: 30rpx;

				image {
					width: 336rpx;
					height: 60rpx;
				}
			}

			.info-header-right {
				// font-size: 28rpx;
				margin-right: 18rpx;

				image {
					width: 158rpx;
					height: 54rpx;
				}
			}
		}

		.info-main {
			display: flex;
			justify-content: space-between;

			.info-left {
				width: 70%;


				.info-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					font-size: 30rpx;

					.info-title {
						width: 35%;
						text-align: left;
					}

					.info-value {
						flex: 1;
						text-align: left;
					}
				}
			}

			.info-right {
				width: 30%;
				display: flex;
				justify-content: center;

				.info-photo {
					width: 80%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}

				}
			}
		}
	}

	.line {
		width: 80%;
		height: 30rpx;
		margin: 0 auto;
		background: linear-gradient(to right, #FFFFFF, #E8CC95, #FFFFFF);
		position: relative;

		.line-with-logo {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>